<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>canvas</title>
    <style>
      #canvas {
        display: block;
        margin: 0 auto;
        border: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300"></canvas>
    <script>
      /** @type {HTMLCanvasElement} */
      let canvas = document.querySelector("#canvas");
      let ctx = canvas.getContext("2d");
      let pointX = ctx.canvas.width / 2;
      let pointY = ctx.canvas.height / 2;
      let avatar = new Image()
      avatar.src = './avatar.jpg'
      avatar.addEventListener('load',function(){
        // drawImage(image: CanvasImageSource, dx: number, dy: number)
        ctx.drawImage(avatar,100,100)
        // drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number)
        ctx.drawImage(avatar,0,0,50,50)
        // drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number)
        ctx.drawImage(avatar,50,50,50,50,50,50,50,50)
      })
    </script>
  </body>
</html>
